//用react封装
var currentpage = 1,totlepage = 1,i;//分页的当前页和总的页数
var Page = React.createClass({
    setPage: function (e) {
        setPage($(e.target).html());
        this.props.onPageClick(1);
    },
    showPage: function () {
        showPage();
    },
    render: function () {
        {
            var items = [],
                svar = this;
            if(totlepage == 0 ){
                items.push({num:1,checked:true})
            }else if(totlepage < 6){
                for(i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-2;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="studentsInfo-page tableInfo-page">
                <div className="page-number">每页<span className="page-number-list" onClick={this.showPage}>{pagecount}</span>条</div>
                <div className="page-list" style={{top:pageListTop+"px"}}>
                    <ul>
                        {
                            pageList.map(function (item) {
                                return (<li onClick={svar.setPage}>{item}</li>)
                            })
                        }
                    </ul>
                </div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <li className="page-limit-img" name="-1" onClick={this.props.otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)}><span className={this.props.otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                        {
                            items.map(function (item) {
                                return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)} className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                            })
                        }
                        <li className="page-limit-img" name="-2" onClick={this.props.otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)} ><span className={this.props.otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                    </ol>
                </div>
            </div>
        );
    }
});
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            otherData:{
                pageLeft:0,
                pageRight:0
            },
            tableData: [],
            trData: [],
            navigation: '',//导航内容
            msgReceivObject: 2,//1:全部用户 2:指定手机号 3:地区
            addressData: [],//地址数组
            schoolList: [],//更具地区查询学校
            schoolShow: false,//地址下拉框是否显示
            selectSchool: [],//选择的学校
            messageType: 2//消息类型2 推送 1短信
        }
    },
    componentDidMount: function () {
        suixun.hideLoding();//隐藏加载中
        this.getMessageData(1);
        //时间插件初始化
        $('.input-time').datetimepicker({
            format: "Y-m-d H:i:s", //格式化日期
            timepicker: true, //显示时间选项
            todayButton: false, //关闭选择今天按钮
            step:1,//时间间隔
        });
    },
    /**
     * 获取数据
     */
    getMessageData: function (page) {
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/sendMessageManage/querySendMessageList.json?param={pagenumber:'+page+',pagecount:'+pagecount+'}','',"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                if(data.info.queryresult){
                    var getPageInfoTwo = suixun.getPageInfoTwo(page,data.info.totlepage);
                    this.state.otherData.pageLeft = getPageInfoTwo.pageLeft;
                    this.state.otherData.pageRight = getPageInfoTwo.pageRight;
                    currentpage = getPageInfoTwo.currentpage;totlepage = getPageInfoTwo.totlepage;
                    this.setState({tableData:data.info.queryresult,otherData:this.state.otherData});
                }else{
                    suixun.alert('没有查询到数据！',function (data) {
                        if(data){
                            currentpage = 1;totlepage = 1;
                            this.setState({tableData:[],otherData:{pageLeft:0,pageRight:0}});
                        }
                    }.bind(this));
                }
            }else{
                suixun.alert(data.msg,function (data) {
                    if(data){
                        currentpage = 1;totlepage = 1;
                        this.setState({tableData:[],otherData:{pageLeft:0,pageRight:0}});
                    }
                }.bind(this));
            }
        }.bind(this));
    },
    /**
     *  分页
     **/
    onPageClick: function (num) {
        if(num > 0){
            currentpage = num;
        }else if(num == -1 && currentpage > 1){
            currentpage --;
        }else if(num == -2  && currentpage < totlepage){
            currentpage ++;
        }
        this.getMessageData(currentpage);
    },
    /**
     * 设置导航名称
     * @return {XML}
     */
    setNavigation: function (name) {
        if(name==''){

        }else if(name=='新增消息'){
            $("#deviceName").val('');//考勤机名称
            $("#deviceCode").val('');//考勤机编号
            $("#factoryCode").val('');//考勤机生成厂商
            $("#deliverySchoolName").val('');//考勤机投放学校
        }
        this.setState({navigation:name})
    },
    /**
     * 查看消息信息——一行的内容
     * @param data 消息内容
     */
    getTrData: function (data) {
        var addressData = [];
        if(data.regions!=null){
            addressData = JSON.parse(data.regions);
        }
        this.setNavigation('消息详情');
        this.setState({trData:data,addressData:addressData,msgReceivObject: 2});
    },
    /**
     * 删除消息
     */
    onClickDeleteMssage: function (messageid) {
        var svar = this;
        suixun.confirm_noTit('确定删除此提问?',function (data) {
            if(data == true){
                suixun.showLoding();//显示加载中
                var param="param={";
                param = getJsonDataNotEmpty(param,"messageid",''+messageid+'');//发送类型
                param += "}";
                suixun.ajax(serverUrl+'/sendMessageManage/deleteSendMessage.json',param,"get",function(data){
                    suixun.hideLoding(200);//隐藏加载中
                    if(data.code == 200 && data.info.resultstatus=="1"){
                        suixun.alert("删除成功!",function (data) {
                            if(data){
                                svar.onPageClick(currentpage);//更新数据
                            }
                        })
                    }else{
                        suixun.alert("删除失败!")
                    }
                });
            }
        });
    },
    /**
     * 改变接收对象
     */
    changeMsgReceivObject: function () {
        this.setState({msgReceivObject: $(".message-object option:selected").val(),schoolList: [],schoolShow: false,selectSchool: [],addressData: []});
    },
    /**
     * 新增地址
     */
    addAdress: function () {
        var province = $('.span-provinceid').text();//省
        var city = $('.span-cityid').text();//市
        var county = $('.span-countyid').text();//区
        var id = 0,addressData = this.state.addressData;
        if(province=="选择省份"){
            suixun.alert('请选择省份');
            return;
        }
        province = province=="选择省份"?"":province;
        city = city=="选择地区"?"":city;
        county = county=="选择县或街道"?"":county;
        if(addressData.length>0){
            id = addressData[addressData.length-1].id+1;
        }
        var isRepeat = false;
        for(var j = 0;j < addressData.length;j++){
            if(addressData[j].province == province){
                if(addressData[j].city == city && city != ''){
                    if(addressData[j].town == county && county != ''){
                        if(addressData[j].schoolNames == this.state.selectSchool && this.state.selectSchool != ''){
                            isRepeat = true;
                            break;
                        }else if((this.state.selectSchool == '' && addressData[j].schoolNames == '')||(this.state.selectSchool != '' && addressData[j].schoolNames == '')||(this.state.selectSchool == '' && addressData[j].schoolNames != '')){
                            isRepeat = true;
                            break;
                        }else if(addressData[j].schoolNames != '' && this.state.selectSchool != ''){
                            for(var k = 0;k<addressData[j].schoolNames.length;k++){
                                for(var p = 0;p<this.state.selectSchool.length;p++){
                                    if(addressData[j].schoolNames[k]==this.state.selectSchool[p]){
                                        isRepeat = true;
                                        break;
                                    }
                                }
                            }
                        }
                    }else if((county == '' && addressData[j].town == '') || (county != '' && addressData[j].town == '') || (county == '' && addressData[j].town != '')){
                        isRepeat = true;
                        break;
                    }
                }else if((city == '' && addressData[j].city=='') || (city != '' && addressData[j].city == '') || (city == '' && addressData[j].city != '')){
                    isRepeat = true;
                    break;
                }
            }
        }
        if(isRepeat){
            suixun.alert('已有该地区！');
            return;
        }
        addressData.push({
            id:id,
            province:province,
            city:city,
            town:county,
            schoolNames: this.state.selectSchool
        });
        this.setState({addressData:addressData});
    },
    /**
     * 清除指定地址
     */
    closeAddres: function (index) {
        if(this.state.addressData.length==1){
            this.state.addressData = [];
        }else{
            this.state.addressData.splice(index,1);
        }
        this.setState({addressData:this.state.addressData});
    },
    /**
     * 发布消息
     *
     */
    onClockSendMessage: function () {
        var svar = this;
        var userType = $(".user-type option:selected").val();//客户端类型
        var msgType = $(".message-type option:selected").val();//消息类型
        var msgObject = $(".message-object option:selected").val();//消息接收对象 this.state.msgReceivObject
        // var msgFrequency = $(".message-frequency option:selected").val();//发送频率
        var phones = $(".phones").val();//单个用户
        var frequencyTime = $(".frequencyTime").val();//推送的时间
        var messageTitle = $(".message-title").val();//主题摘要
        var textareaContent = $("#textareaContent").val();//内容

        //验证消息接收对象
        if(msgObject == 2){
            if(phones.length == 0){
                suixun.alert("用户手机号不能为空!");
                return;
            }
        }else if(msgObject == 3){
            if(this.state.addressData.length == 0){
                suixun.alert("请选择地区！");
                return;
            }
        }
        // //验证日期
        // if(frequencyTime.length == 0){
        //     suixun.alert("推送时间不能为空!");
        //     return;
        // }
        //验证title
        if(messageTitle.length == 0 && msgType == 2){
            suixun.alert("主题摘要不能为空!");
            return;
        }else if(messageTitle.length > 40 && msgType == 2){
            suixun.alert("主题摘要内容超出20个汉字!");
            return;
        }else if(msgType == 2){
            messageTitle.replace(/\'/g,"\\'").replace(/\"/g,'\\"');//替换单引号和双引号
        }
        //验证内容
        if(textareaContent.length == 0 && msgType == 2){
            suixun.alert("消息内容不能为空!");
            return;
        }else if(textareaContent.length > 500 && msgType == 2){
            suixun.alert("消息内容内容超出长度限制!");
            return;
        }else{
            textareaContent.replace(/\'/g,"\\'").replace(/\"/g,'\\"');//替换单引号和双引号
        }
        if(msgType==1){
            messageTitle = '未接听电话通知';
            textareaContent = '[随寻科技]您好，成都随寻通教育科技有限公司客服工作人员多次联系您未接听，为尽快处理您反馈的孩子学生证的使用问题，您方便时可直接拨打我们的客服热线400-827-3366或者关注我们的微信公众号“随寻科技”，我们的客服的工作时间是9.00--22.00，祝您生活愉快！';
        }
        var param = {
            sendtype: this.state.messageType,
            receivetype: userType,
            sendrate: 1,
            title: messageTitle,
            content: textareaContent,
        };
        if(msgObject == 2){
            param['peopletels'] = phones;//电话号码
        }else if(msgObject == 3){
            param['regions'] = this.state.addressData;//地址
        }
        suixun.showLoding();//显示加载中
        // $.ajax({
        //     type: "post",
        //     url: serverUrl+'/sendMessageManage/send_message.json',
        //     async: false,
        //     data: JSON.stringify(param),
        //     contentType: "application/json; charset=utf-8",
        //     dataType: "json",
        //     success: function(data){
        //         suixun.hideLoding();//隐藏加载中
        //         if(data.code == 200){
        //             suixun.alert('操作成功!',function (data) {
        //                 if(data){
        //                     svar.setNavigation('');//设置导航为空
        //                     svar.onPageClick(currentpage);//更新数据
        //                     $(".user-type option:selected").val('1');//客户端类型
        //                     // $(".message-type option:selected").val();//消息类型
        //                     $(".message-Object option:selected").val('1');//消息接收对象
        //                     // $(".message-frequency option:selected").val();//发送频率
        //                     // $(".frequencyTime").val("");//推送的时间
        //                     $(".message-title").val("");//主题摘要
        //                     $(".phones").val("");//个人用户
        //                     $("#textareaContent").val("");//内容
        //                     svar.setState({schoolList: [],schoolShow: false,selectSchool: [],addressData: []});//地址
        //                 }
        //             }.bind(this));
        //         }else{
        //             suixun.alert(data.msg);
        //         }
        //     }.bind(this),
        // });

        suixun.ajax(serverUrl+'/sendMessageManage/send_message.json',JSON.stringify(param),"post",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                suixun.alert('操作成功!',function (data) {
                    if(data){
                        this.setNavigation('');//设置导航为空
                        this.onPageClick(currentpage);//更新数据
                        $(".user-type option:selected").val('1');//客户端类型
                        $(".message-type option:selected").val('2');//消息类型
                        $(".message-Object option:selected").val('1');//消息接收对象
                        // $(".message-frequency option:selected").val();//发送频率
                        // $(".frequencyTime").val("");//推送的时间
                        $(".message-title").val("");//主题摘要
                        $(".phones").val("");//个人用户
                        $("#textareaContent").val("");//内容
                        this.setState({schoolList: [],schoolShow: false,selectSchool: [],addressData: [],messageType: 2});//地址
                    }
                }.bind(this));
            }else{
                suixun.alert(data.msg);
            }
        }.bind(this),"application/json; charset=utf-8");
    },
    /**
     * 改变消息类型
     */
    changeMessageType: function () {
        this.setState({messageType: $(".message-type option:selected").val()})
    },
    /**
     * 获取地区中学习
     * @return {XML}
     */
    getSchoolData: function (province,city,town,type) {
        if(type){
            this.setState({schoolShow:false,schoolList:[],selectSchool:[]});
        }else{
            suixun.showLoding();//显示加载中
            var param="param={";
            param = getJsonDataNotEmpty(param,"province",'"'+province+'"');
            param = getJsonDataNotEmpty(param,"city",'"'+city+'"');
            param = getJsonDataNotEmpty(param,"town",'"'+town+'"');
            param += "}";
            suixun.ajax(serverUrl+'/schoolManage/querySchool.json',param,"get",function(data){
                suixun.hideLoding();//隐藏加载中
                if(data.code == 200 ){
                    var schoolList = [];//this.props.schoolList
                    for(var i=0;i<data.info.length;i++){
                        var obj=data.info[i];
                        schoolList.push({id:obj.id,value:obj.schoolname,select:false});
                    }
                    this.setState({schoolList:schoolList,selectSchool:[],schoolShow:true});
                }else{
                    this.setState({schoolList:[],selectSchool:[],schoolShow:true});
                }
            }.bind(this));
        }
    },
    /**
     * 设置学校是否选中
     */
    setSchoolSelect: function (name) {
        var schoolList = this.state.schoolList,selectSchool = [];
        for(var j = 0;j < schoolList.length;j++){
            if(schoolList[j].value == name){
                schoolList[j].select = !schoolList[j].select;
            }
            if(schoolList[j].select){
                selectSchool.push(schoolList[j].value);
            }
        }
        this.setState({schoolList:schoolList,selectSchool:selectSchool});
    },
    render: function () {
        var trData = this.state.trData;
        var Tabels = this.state.tableData.map(function (data,index) {
            return (
                <tr>
                    <td style={{width: '5%'}}>{parseInt(index)+1}</td>
                    <td style={{width: '10%'}}>{data.receivetype}</td>
                    <td style={{width: '15%'}}>{data.sendtype}</td>
                    <td style={{width: '10%'}}>{data.peopletels==null?'按地区':'用户手机号'}</td>
                    <td style={{width: '15%'}}>{data.starttime}</td>
                    <td style={{width: '20%'}}>{data.title}</td>
                    <td style={{width: '10%'}}>{data.operationername}</td>
                    <td style={{width: '15%'}}>
                        <div className=" trButton look-message trLeft" onClick={this.getTrData.bind(this,data)}>查看</div>
                        <div className="trButton delete-message trLeft" onClick={this.onClickDeleteMssage.bind(this,data.id)}>删除</div>
                    </td>
                </tr>
            )
        }.bind(this));
        return (
            <div className="tableManage-body">
                <header>
                    <div className="header-left" >
                        <div style={this.state.navigation!=''?{display:'none'}:{display:'block'}} className='navigation'>已推送列表</div>
                        <div style={this.state.navigation==''?{display:'none'}:{display:'block'}} className='navigation selsect' onClick={this.setNavigation.bind(this,'')}>
                            <a href="javascript:void(0);">已推送列表</a><span>>{this.state.navigation}</span>
                        </div>
                    </div>
                    <div className="header-right" style={this.state.navigation!=''?{display:'none'}:{display:'block'}}>
                        <div className="add-message" onClick={this.setNavigation.bind(this,'新增消息')}>
                            <span className="add-message-img"><img src="../img/icon/add-white.png" /></span>
                            <span className="add-message-text">新增消息</span>
                        </div>
                    </div>
                </header>
                <div className="studentsInfo tableInfo" style={this.state.navigation!=''?{display:'none'}:{display:'block'}}>
                    <div className="studentsInfo-data tableInfo-data">
                        <div className="studentsInfo-data-table tableInfo-data-table" >
                            <table className="head-body head-body">
                                <thead>
                                    <th style={{width: '5%'}}>序号</th>
                                    <th style={{width: '10%'}}>发送客户端</th>
                                    <th style={{width: '15%'}}>消息类型</th>
                                    <th style={{width: '10%'}}>接收对象</th>
                                    <th style={{width: '15%'}}>发送日期</th>
                                    <th style={{width: '20%'}}>主题摘要</th>
                                    <th style={{width: '10%'}}>发送人</th>
                                    <th style={{width: '15%'}}>操作</th>
                                </thead>
                                <tbody>
                                {this.state.tableData==""?'':Tabels}
                                </tbody>
                            </table>
                            {this.state.tableData==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                        </div>
                    </div>
                    <Page otherData={this.state.otherData} onPageClick={this.onPageClick} />
                </div>
                <div className="body-updateAttendance" style={this.state.navigation!=''?{display:'block'}:{display:'none'}}>
                    <div className="body-content" >
                        <div className="body-content-title" style={{ backgroundPosition: '78px 4px'}}>发送客户端：</div>
                        <div className="body-content-text">
                            {
                                this.state.navigation=='新增消息'?
                                    <div className="content-select-border">
                                        <select className="export-factory msgType user-type" >
                                            <option value="1" selected="selected">全部</option>
                                            <option value="3" >家长端</option>
                                            <option value="2" >教师端</option>
                                        </select>
                                    </div>
                                    :
                                    <div className="content-border element-content noBorder textInput" >{trData.receivetype}</div>
                            }
                        </div>
                    </div>
                    <div className="body-content" >
                        <div className="body-content-title">消息类型：</div>
                        <div className="body-content-text">
                            {
                                this.state.navigation=='新增消息'?
                                    <div className="content-select-border">
                                        <select className="export-factory msgType message-type" onChange={this.changeMessageType.bind(this)}>
                                            {/*<option value="1" selected="selected">全部</option>*/}
                                            <option value="2" selected="selected">推送</option>
                                            <option value="1" >短信</option>
                                        </select>
                                    </div>
                                    :
                                    <div className="content-border element-content noBorder textInput" >{trData.sendtype}</div>
                            }

                        </div>
                    </div>
                    <div className="body-content" >
                        <div className="body-content-title">接收对象：</div>
                            {
                                this.state.navigation=='新增消息'?
                                    <div className="body-content-text">
                                        <div className="content-select-border">
                                            <select className="export-factory msgType message-object " selected={this.state.msgReceivObject} onChange={this.changeMsgReceivObject.bind(this)}>
                                                <option value="1" >全部用户</option>
                                                <option value="2" selected='selected'>部分用户</option>
                                                <option value="3" >按地区选择</option>
                                            </select>
                                        </div>
                                    </div>
                                    :
                                    trData.peopletels != null?
                                        <div className="content-border element-content noBorder" style={{height:'auto',minHeight:'30px',marginTop:'10px',wordWrap: 'break-word'}}>{trData.peopletels}</div>
                                        :
                                        <div className="content-border element-content noBorder" style={{height:'auto',width:'900px'}}>
                                            {
                                                this.state.addressData.length>0?
                                                    this.state.addressData.map(function (data,index) {
                                                        return (
                                                            <div className="text-block">
                                                                <span className="content">{data.province}&nbsp;{data.city}&nbsp;{data.town}&nbsp;{data.schoolNames.toString()}</span>
                                                                {/*<span className="colose-img" onClick={this.closeAddres.bind(this,index)}/>*/}
                                                            </div>
                                                        )
                                                    }.bind(this)):<span style={{color:'#999999'}}>此条记录没有获取到地址！</span>
                                            }
                                        </div>

                            }


                    </div>
                    {
                        /**
                         * 单个用户
                         */
                    }
                    {
                        this.state.navigation=='新增消息'?
                                <div className="body-content" style={this.state.msgReceivObject==2?{display:'block'}:{display:'none'}}>
                                    <div className="body-content-title noImg"/>
                                    <div className="body-content-text">
                                        <div className="content-border content-textarea">
                                            <textarea type="text" className="textarea-content phones" placeholder='请输入手机号，手机号之间用"，"隔开' maxLength="1000"/>
                                        </div>
                                    </div>
                                </div>
                            :''
                    }

                    {
                        /**
                         * 按地区选择
                         */
                    }
                    {
                        this.state.msgReceivObject==3?<Address addAdress={this.addAdress} schoolShow={this.state.schoolShow} schoolList={this.state.schoolList} selectSchool={this.state.selectSchool} getSchoolData={this.getSchoolData} setSchoolSelect={this.setSchoolSelect}/>:''
                    }
                    <div className="body-content" style={this.state.msgReceivObject==3?{display:'block'}:{display:'none'}}>
                        <div className="body-content-title" >已选地区：</div>
                        <div className="body-content-text">
                            <div className="content-border element-content noBorder" style={{height:'auto',width:'900px'}}>
                                {
                                    this.state.addressData.length>0?
                                        this.state.addressData.map(function (data,index) {
                                            return (
                                                <div className="text-block">
                                                    <span className="content">{data.province}&nbsp;{data.city}&nbsp;{data.town}&nbsp;{data.schoolNames.toString()}</span>
                                                    <span className="colose-img" onClick={this.closeAddres.bind(this,index)}/>
                                                </div>
                                            )
                                        }.bind(this)):<span style={{color:'#999999'}}>请选择地区！</span>
                                }
                                {/*<div className="text-block">*/}
                                {/*<span className="content">重庆市 涪陵区 珍溪镇</span>*/}
                                {/*<span className="colose-img"/>*/}
                                {/*</div>*/}
                                {/*<div className="text-block">*/}
                                {/*<span className="content">重庆市 涪陵区 珍溪镇</span>*/}
                                {/*<span className="colose-img"/>*/}
                                {/*</div>*/}
                            </div>
                        </div>
                    </div>
                    <div className="body-content" >
                        <div className="body-content-title">发送频率：</div>
                        <div className="body-content-text">
                            {
                                this.state.navigation=='新增消息'?
                                    <div className="content-select-border">
                                        <select className="export-factory msgType message-frequency">
                                            <option value="1" selected="selected">只发送一次</option>
                                            {/*<option value="2" >连续三天</option>*/}
                                            {/*<option value="3" >连续一周</option>*/}
                                        </select>
                                    </div>
                                    :
                                    <div className="content-border element-content noBorder textInput" >{trData.sendrate}</div>
                            }
                        </div>
                    </div>
                    <div className="body-content" style={{display:'none'}}>
                        <div className="body-content-title" >推送时间：</div>
                        {
                            this.state.navigation=='新增消息'?
                                <div className="body-content-text">
                                    <div className="content-border content-time" >
                                        <input type="text" className="input-content input-time frequencyTime" placeholder="请选择推送时间" maxLength="50" />
                                    </div>
                                </div>
                                :
                                <div className="content-border element-content noBorder textInput" >{trData.starttime}</div>
                        }
                    </div>
                    <div className="body-content" style={{display: this.state.messageType==1?'none':'block'}}>
                        <div className="body-content-title">主题摘要：</div>
                        {
                            this.state.navigation=='新增消息'?
                                <div className="body-content-text">
                                    <div className="content-border">
                                        <input type="text" className="input-content message-title" placeholder="请填写主题摘要（限20个汉字）" maxLength="40"/>
                                    </div>
                                </div>
                                :
                                <div className="content-border element-content noBorder textInput" >{trData.title}</div>
                        }
                    </div>
                    <div className="body-content" style={{display: this.state.messageType==1?'none':'block'}}>
                        <div className="body-content-title">消息内容：</div>
                        {
                            this.state.navigation=='新增消息'?
                                <div className="body-content-text">
                                    <div className="content-border content-textarea">
                                        <textarea type="text" className="textarea-content" id="textareaContent" placeholder="请填写消息内容（限500个汉字）" maxLength="1000"/>
                                    </div>
                                </div>
                                :
                                <div className="content-border element-content " style={{height:'auto',minHeight:'30px',marginTop:'10px'}}>{trData.content}</div>
                        }
                    </div>
                    {
                        this.state.navigation=='新增消息'?
                            <div className="body-content">
                                <span className="body-save" onClick={this.onClockSendMessage.bind(this)}>发布</span>
                            </div>
                            :''
                    }

                </div>
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }
});
/**
 * 获取行政区域组件开始
 * @type {*}
 */
var Address = React.createClass({
    getInitialState:function () {
        return{
            provinceData:[],
            cityData:[],
            countyData:[]
        };
    },
    queryAddress:function (num,province,city) {
        var param="param={";
        param = getJsonDataNotEmpty(param,"type",'"'+num+'"');
        param = getJsonDataNotEmpty(param,"province",'"'+province+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+city+'"');
        param += "}";
        var svar = this;
        suixun.ajax(serverUrl+'/schoolManage/queryRegion.json',param,"get",function(data){
            if(data.code == 200){
                if(num == "1"){
                    var provinceData = [];
                    for(var i = 0 ;i < data.info.length;i++ ){
                        provinceData[i] = {value:data.info[i].province};
                    }
                    svar.setState({provinceData:provinceData});
                }else if(num == "2"){
                    var cityData = [];
                    for(var i = 0 ;i < data.info.length;i++ ){
                        cityData[i] = {value:data.info[i].city};
                    }
                    svar.setState({cityData:cityData});
                }else{
                    var countyData = [];
                    for(var i = 0 ;i < data.info.length;i++ ){
                        countyData[i] = {value:data.info[i].town};
                    }
                    svar.setState({countyData:countyData});
                }
            }
        });
    },
    //查询省份
    queryProvince:function () {
        if($("#province").find(".body-address-content-selectData").css('display')=='none'&&this.state.provinceData.length>0){
            $("#province").find(".body-address-content-selectData").css('display','block');
            $("#city").find(".body-address-content-selectData").css('display','none');
            $("#county").find(".body-address-content-selectData").css('display','none');
            return false;
        }else if(this.state.provinceData.length>0){
            $("#province").find(".body-address-content-selectData").css('display','none');
            return false;
        }
        this.queryAddress(1,"","");
        $("#province").find(".body-address-content-selectData").css('display','block');
    },
    queryCity:function () {
        if($("#provinceid").next().html()=='选择省份'||$("#province").find(".body-address-content-selectData").css('display')=='block'){
            return false;
        }
        if($("#city").find(".body-address-content-selectData").css('display')=='block'){
            $("#city").find(".body-address-content-selectData").css('display','none');
            return false;
        }
        this.queryAddress(2,$(".span-provinceid").html(),"");
        $("#city").find(".body-address-content-selectData").css('display','block');
        $("#county").find(".body-address-content-selectData").css('display','none');
    },
    queryCounty:function () {
        if($("#provinceid").next().html()=='选择省份'||$("#cityid").next().html()=='选择地区'||$("#city").find(".body-address-content-selectData").css('display')=='block'
            ||$("#province").find(".body-address-content-selectData").css('display')=='block'){
            return false;
        }
        if($("#county").find(".body-address-content-selectData").css('display')=='block'){
            $("#county").find(".body-address-content-selectData").css('display','none');
            return false;
        }
        this.queryAddress(3,"",$(".span-cityid").html());
        $("#county").find(".body-address-content-selectData").css('display','block');
    },
    /**
     * 获取地区中学习
     * @return {XML}
     */
    getSchoolDataAddress: function (province,city,town,type) {
        this.props.getSchoolData(province,city,town,type);
    },
    /**
     * 显示下拉列表
     * @return {XML}
     */
    showListData: function () {
        $(".school-list-data").show();
    },
    render:function () {
        return(
            <div className="body-content">
                <span className="body-content-title" >选择地区：</span>
                <div className="body-address-contents">
                    <div className="body-address-content" id="province">
                        <input type="hidden" id="provinceid"/>
                        <span className="body-address-content-default text-sub span-provinceid" title="" onClick={this.queryProvince}>选择省份</span>
                        <AddressData type="1" resultData={this.state.provinceData} getSchoolDataAddress={this.getSchoolDataAddress}/>
                    </div>
                    <div  id="city" className="body-address-content">
                        <input type="hidden" id="cityid"/>
                        <span className="body-address-content-default text-sub span-cityid" title="" onClick={this.queryCity}>选择地区</span>
                        <AddressData type="2"  resultData={this.state.cityData} getSchoolDataAddress={this.getSchoolDataAddress}/>
                    </div>
                    <div id="county" className="body-address-content">
                        <input type="hidden" id="countyid" value="" data-dataType="Number" data-require="true" data-msg="地区不能为空"/>
                        <span className="body-address-content-default text-sub span-countyid" title="" onClick={this.queryCounty}>选择县或街道</span>
                        <AddressData type="3"  resultData={this.state.countyData} getSchoolDataAddress={this.getSchoolDataAddress}/>
                    </div>
                    <div className="adress-button">
                        {
                            this.props.schoolShow?
                                <div className="school-list">
                                    <div className="school-list-title body-address-content" onClick={this.showListData}>
                                        <span className="body-address-content-default text-sub " >{this.props.selectSchool.length>0?'已选择'+this.props.selectSchool.length+'所学校':'请选择学校'}</span>
                                        <span id="selectSchool" style={{display:'none'}}>{this.props.selectSchool.toString()}</span>
                                    </div>
                                    <div className="school-list-data">
                                        {
                                            this.props.schoolList.map(function(data,index){
                                                return(
                                                    <div className={data.select?'menu-radio-list checkBox select text-sub ':'menu-radio-list checkBox text-sub'} onClick={this.props.setSchoolSelect.bind(this,data.value)}><span>{data.value}</span></div>
                                                )
                                            }.bind(this))
                                        }
                                    </div>
                                </div>
                                :''
                        }
                        <div className="header-right-botton" onClick={this.props.addAdress.bind(this)}>点击新增</div>
                    </div>
                </div>
            </div>
        );
    }
});
/**
 * 省市区组装下拉列表
 * @type {*}
 */
var AddressData = React.createClass({
    componentDidMount:function () {
        $('.body-address-content').hover(function () {
        },function () {
            $('.body-address-content-selectData').css('display','none');
        });
    },
    handleClick:function (e) {
        if($(e.target).attr("data-type")=="1"){
            $("#city").find(".body-address-content-default").html('选择地区');
            $("#county").find(".body-address-content-default").html('选择县或街道');
            this.setState({cityData:[],countyData:[]});
            this.props.getSchoolDataAddress('','','',true);
        }else if($(e.target).attr("data-type")=="2"){
            this.setState({countyData:[]});
            $("#county").find(".body-address-content-default").html('选择县或街道');
            this.props.getSchoolDataAddress('','','',true);
        }else if($(e.target).attr("data-type")=="3"){
            this.props.getSchoolDataAddress($("#provinceid").val(),$("#cityid").val(),e.target.innerHTML,false);
        }

        $(e.target).parent().prev().html(e.target.innerHTML);
        $($(e.target).parent().prev()).attr("title",e.target.innerHTML);
        $(e.target).parent().prev().prev().val(e.target.innerHTML);
        $($(e.target).parent()).hide();

    },
    render:function () {
        var svar = this;
        var resultDATA=this.props.resultData.map(function (value,index) {
            return(
                <span onClick={svar.handleClick} data-type={svar.props.type} >{value.value}</span>
            );
        });
        return(
            <div className="body-address-content-selectData">
                {resultDATA}
            </div>
        );
    }
});
ReactDOM.render(
    <Main />,
    document.getElementById('tableManage')
);
$("*").bind("click",function(e){
    var target = $(e.target);
    if(target.closest(".checkBox").length == 1 || target.closest(".body-address-content").length == 1){

    }else{
        $(".school-list-data").hide();
    }
});